<template>
  <div class="right_height">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">个人中心</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <PersonMenu></PersonMenu>
  </div>
  <div class="right_body">
    <el-card>
      <div class="flex">
        <el-avatar :size="100" style="margin-left: 30px" :src="logoImage" />
        <el-descriptions title="" class="flex-item userinfo" v-for="(item, index) in tableData" :key="index">
          <el-descriptions-item label="编号:">{{
              item.bianhao
          }}</el-descriptions-item>
          <el-descriptions-item label="用户名:">{{
              item.teaUsername
          }}</el-descriptions-item>
          <el-descriptions-item label="性别：">{{
              item.Sex
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号码:">{{
              item.Phone
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="margin: 50px 20px 20px">
        <el-tab-pane label="修改个人信息" name="first">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon label-width="120px"
            class="demo-ruleForm" style="width: 500px; margin-top: 20px">
            <el-form-item label="真实姓名" prop="Name">
              <el-input v-model="ruleForm.Name" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" prop="Sex">
              <el-radio-group v-model="ruleForm.Sex">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" type="number" prop="Phone">
              <el-input v-model="ruleForm.Phone" />
            </el-form-item>
            <el-form-item>
              <el-button type="info" @click="check(ruleFormRef)">校验</el-button>
              <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <el-form ref="ruleFormPasswordRef" :model="ruleFormPassword" :rules="rules" status-icon label-width="80px"
            class="demo-ruleForm" style="width: 500px; margin-top: 20px">
            <el-form-item label="新密码" prop="teaPassword">
              <el-input type="password" v-model="ruleFormPassword.teaPassword" />
            </el-form-item>
            <el-form-item label="确认密码" prop="teaPassword">
              <el-input type="password" v-model="ruleFormPassword.againTeaPassword" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitFormPassword()">保存</el-button>
              <el-button @click="resetFormPassword()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup>
import PersonMenu from "@/components/PersonMenu.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import utils from "@/utils/utils.js";
import httpHelper from "@/api/httpHelper.js";
import { useStore } from "vuex";

let store = useStore();
let { proxy } = getCurrentInstance();

/* 获取用户信息 */
const userinfo = reactive([]);
const logoImage = new URL("../../../assets/image/529465.jpg", import.meta.url).href;

onMounted(() => {
  loading();
});

let tableData = reactive([]);
const loading = () => {
  utils.showLoading();
  userinfo.push(store.state.userinfo);
  httpHelper.get(
    "",
    {},
    (res) => {
      console.log(res);
      utils.hideLoading();
      if (tableData <= 0) {
        tableData.push(res.data.data);
      } else {
        tableData.length = [];
        tableData.push(res.data.data);
      }
    },
    (error) => {
      console.log(error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};

/* 基础信息 */
const activeName = ref("first");
const validatePhone = (rule, value, callback) => {
  if (value != "") {
    if (phoneRules()) {
      callback(new Error("手机号已存在，请重新输入"));
    } else {
      callback();
    }
  }
  callback();
};

const ruleFormRef = ref();
const ruleForm = reactive({
  bianhao: "",
  Name: "",
  Sex: "",
  Phone: "",
});

const rules = reactive({
  Name: [
    {
      required: true,
      message: "请输入您的真实姓名！",
      trigger: "blur",
    },
    { min: 2, max: 25, message: "真实姓名长度为2-25位", trigger: "blur" },
  ],
  Sex: [
    {
      required: true,
      message: "请选择您的性别！",
      trigger: "change",
    },
  ],
  Phone: [
    {
      required: true,
      message: "请输入您的手机号！",
      trigger: "blur",
    },
    {
      required: true,
      validator: validatePhone,
      message: "该手机号已存在，请重新输入！",
      trigger: "blur",
    },
    {
      min: 11,
      max: 12,
      message: "格式错误，请重新输入！",
      trigger: "blur",
    },
  ],
  teaPassword: [
    {
      required: true,
      message: "请输入新密码！",
      trigger: "blur",
    },
    { min: 6, max: 20, message: "密码长度为6-20位", trigger: "blur" },
  ],
});

const phoneRules = () => {
  let phone = ruleForm.Phone;
  httpHelper.get(
    "/myCenter/findPhone",
    {
      phone,
    },
    (res) => {
      if (res.data.flag === false) {
        return false;
      } else {
        utils.showError("该手机号已存在，请重新输入！");
        ruleForm.Phone = "";
      }
    },
    (error) => {
      console.log(error);
      utils.hideLoading();
      utils.showError("不好意思，出错了，请联系管理员!");
    }
  );
};

// 校验
const check = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('正确!');
    } else {
      console.log('信息错误!', fields);
    }
  });
};
const submitForm = (formEl) => {
  userinfo.push(store.state.userinfo);
  ruleForm.bianhao = userinfo[0].bianhao;
  let Teacher = ruleForm;
  if (ruleForm.Name == '' ||
    ruleForm.Phone == '') {
    utils.showError('必填项不能为空，请重新输入！');
    check(formEl);
  } else {
    httpHelper.post(
      "/myCenter/updateTea",
      Teacher,
      (res) => {
        utils.showSuccess(res.data.errorMsg);
        loading();
        proxy.$refs.ruleFormRef.resetFields();
        ruleForm.Name = "";
        ruleForm.Phone = "";
      },
      (error) => {
        console.log(error);
        utils.hideLoading();
        utils.showError("不好意思，出错了，请联系管理员!");
      }
    );
  }
};

const resetForm = () => {
  proxy.$refs.ruleFormRef.resetFields();
  ruleForm.Name = "";
  ruleForm.Phone = "";
};

/* 修改密码 */
const ruleFormPasswordRef = ref();
const ruleFormPassword = reactive({
  teaPassword: "",
  againTeaPassword: "",
});
const submitFormPassword = () => {
  userinfo.push(store.state.userinfo);
  if (ruleFormPassword.teaPassword == userinfo[0].teaPassword) {
    utils.showError("与原密码一致，请输入新密码！");
  } else if (
    ruleFormPassword.teaPassword != ruleFormPassword.againTeaPassword
  ) {
    utils.showError("两次密码不一致，请重新输入！");
    ruleFormPassword.againTeaPassword = "";
  } else {
    let number = userinfo[0].bianhao;
    let password = ruleFormPassword.teaPassword;
    httpHelper.get(
      "/myCenter/updateTeaPassword",
      {
        params: {
          number,
          password,
        },
      },
      (res) => {
        utils.showSuccess(res.data.errorMsg);
        loading();
        ruleFormPassword.teaPassword = "";
        ruleFormPassword.againTeaPassword = "";
      },
      (error) => {
        console.log(error);
        utils.hideLoading();
        utils.showError("不好意思，出错了，请联系管理员!");
      }
    );
  }
};

const resetFormPassword = () => {
  proxy.$refs.ruleFormPasswordRef.resetFields();
  ruleFormPassword.teaPassword = "";
};
</script>
<style scoped>
.right_height {
  background-color: #dee1e6;
  overflow: hidden;
}

.el-breadcrumb {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  width: 20%;
  float: left;
}

.userinfo {
  margin: 20px 40px;
}
</style>
  